import 'package:flutter/material.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../model/model_default.dart';
import '../../tool/assets.dart';

class Effect extends BaseDialog {
  int select_effect = -1;
  void Function(int, List<int>)? onClick;
  Effect({super.key, required this.select_effect});

  @override
  BaseDialogState createState() => _EffectState();
}

class _EffectState extends BaseDialogState<Effect> {
  final List<String> _list = ['POP', 'Dance', 'Rock', 'Classic', 'Vocal', 'Bass'];

  @override
  Widget buildContent(BuildContext context) {
    return LayoutBuilder(builder: (BuildContext context, BoxConstraints constrains) {
      double width = constrains.maxWidth;
      return SizedBox(
        height: 280,
        child: Column(
          children: [
            const SizedBox(
              height: 39,
              child: Center(
                child: Text(
                  'Effect',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black),
                ),
              ),
            ),
            Container(height: 1, color: Colors.black),
            SizedBox(
              height: 240,
              child: GridView.extent(
                maxCrossAxisExtent: width,
                crossAxisSpacing: 0,
                mainAxisSpacing: 0,
                childAspectRatio: width / 40.0,
                children: _list.asMap().entries.map(($0) {
                  return get_item($0.value, width, 40, true, $0.key == widget.select_effect, () {
                    if (widget.onClick != null) {
                      widget.select_effect = $0.key;
                      widget.onClick!($0.key, effect_data[$0.key]);
                    }
                    setState(() {});
                    Future.delayed(const Duration(milliseconds: 500), () {
                      Navigator.pop(context);
                    });
                  });
                }).toList(),
              ),
            )
          ],
        ),
      );
    });
  }
}

Widget get_item(String text, double w, double h, bool enable, bool select, void Function() onClick) {
  return SizedBox(
      height: h,
      width: w,
      child: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: ElevatedButton(
              onPressed: enable == false || (enable && select) ? null : onClick,
              style: ButtonStyle(
                  overlayColor: WidgetStateProperty.all(Color_theme),
                  backgroundColor: WidgetStateProperty.resolveWith<Color?>(
                    (Set<WidgetState> states) {
                      return enable == false
                          ? Colors.grey
                          : select
                              ? Color_theme
                              : Colors.white;
                    },
                  ),
                  elevation: const WidgetStatePropertyAll(0),
                  shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)))),
              child: Text(
                text,
                style: TextStyle(
                    fontSize: 14,
                    color: enable == false
                        ? Color_disEnable
                        : select
                            ? Colors.white
                            : Colors.black),
              ),
            ),
          ),

          ///
          Positioned(left: 0, right: 0, bottom: 0, child: Container(height: 0.5, color: Colors.black))
        ],
      ));
}
